<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/public' }">公共商品库</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="public-page">
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input" @blur="blurClick()"
						@focus="focusClick(item)" :placeholder="item.placeholder" />
				</div>
				<view class="choice-box">
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</view>
			</div>
			<div class="tag-box">
				<el-button round color="#0071bb" :icon="Plus" @click="goodsVisible = true">添加商品</el-button>
				<el-button round>导出商品清单</el-button>
				<el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" />
					<el-table-column label="商品图片">
						<template #default="item">
							<div class="image">
								<img :src="item.row.image" alt="" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" />
					<el-table-column prop="code" label="商品编码" />
					<el-table-column prop="specs" label="商品规格" />
					<el-table-column prop="price" label="建议销售价" />
					<el-table-column prop="type" label="商品类型" />
					<el-table-column label="审核状态">
						<template #default="item">
							<div class="success" v-if="item.row.istype == '1'">
								{{ item.row.state }}
							</div>
							<div class="fail" v-if="item.row.istype == '2'">
								{{ item.row.state }}
							</div>
							<div class="afoot" v-if="item.row.istype == '3'">
								{{ item.row.state }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="operate" label="操作">
						<template #default="item">
							<div class="afoot" @click="dialogVisible = true" v-if="item.row.istype == '1'"
								style="cursor: pointer;">
								<div>添加批次</div>
							</div>
							<div class="afoot" v-if="item.row.istype == '2'">
								<div style="cursor: pointer;">重新审核</div>
								<div style="cursor: pointer;">删除</div>
							</div>
							<div class="afoot" v-if="item.row.istype == '3'">
								<div>等待审核通知</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog v-model="goodsVisible" title="添加商品" top="5vh" width="760" :show-close="false">
				<div class="goods-list">
					<div class="goods-item" v-for="item in goodsList" :key="item.index">
						<div class="goods-title">{{item.name}}</div>
						<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
							<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
						</el-select>
						<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input" @blur="blurClick()"
							@focus="focusClick(item)" :placeholder="item.placeholder" />
					</div>
				</div>
				<div class="goods-tisp">
					<div class="tisp-left">请上传商品图片<span>（上传图片前请认真阅读图片格式要求按照顺序上传！）</span></div>
					<div class="tisp-right">下载《商品上传手册》</div>
				</div>
				<div class="goods-upload">
					<div v-for="(item,index) in fileList" :key="index">
						<el-upload class="avatar-uploader"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="item.url" :src="item.url" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
						<div class="uploader-text">{{item.name}}</div>
					</div>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="goodsVisible = false">取消</el-button>
						<el-button type="primary" @click="goodsVisible = false">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>
			<el-dialog v-model="dialogVisible" title="添加批次" width="500" :show-close="false">
				<div>
					<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
						label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
						<el-form-item label="进价" prop="price">
							<el-input v-model="ruleForm.price" placeholder="请输入进价" />
						</el-form-item>
						<el-form-item label="生产日期" prop="date">
							<el-date-picker v-model="ruleForm.date" style="width: 100%;" type="date"
								placeholder="请选择生产日期" />
						</el-form-item>
						<el-form-item label="保质期(天)" prop="days">
							<el-input v-model="ruleForm.days" placeholder="请输入保质天数" />
						</el-form-item>
						<el-form-item label="有效日期" prop="effectivedate">
							<el-date-picker v-model="ruleForm.effectivedate" style="width: 100%;" type="date"
								placeholder="请选择有效日期" />
						</el-form-item>
						<el-form-item label="数量" prop="num">
							<el-input v-model="ruleForm.num" placeholder="请输入数量" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
					:disabled="disabled" layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import { Search, RefreshLeft, HelpFilled, Plus } from '@element-plus/icons-vue'
	import { ElMessage, type ComponentSize, type FormInstance, type FormRules, type UploadProps, type UploadUserFile } from 'element-plus'
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	interface goodsList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	interface RuleForm {
		price : string
		days : string
		date : string
		effectivedate : string
		num : string
	}
	const whole = ref(false);
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small');
	const dialogVisible = ref(false);
	const goodsVisible = ref(false);
	const disabled = ref(false);
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		price: '',
		date: '',
		days: '',
		effectivedate: '',
		num: ''
	})
	const rules = reactive<FormRules<RuleForm>>({
		price: [
			{ required: true, message: '请输入进价', trigger: 'blur' },
		],
		date: [
			{
				type: 'date',
				required: true,
				message: '请选择生产日期',
				trigger: 'change',
			},
		],
		days: [
			{
				required: true,
				message: '请输入保质天数',
				trigger: 'change',
			},
		],
		effectivedate: [
			{
				type: 'date',
				required: true,
				message: '请选择有效日期',
				trigger: 'change',
			},
		],
		num: [
			{ required: true, message: '请输入数量', trigger: 'blur' },
		],
	})
	const tableData = [
		{
			id: '1',
			image: 'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
			name: '风景图',
			code: '123',
			specs: '500ml',
			price: '￥100',
			type: '零售商品',
			state: '审核成功',
			istype: '1',
			operate: '等待审核通知'
		},
		{
			id: '2',
			image: 'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
			name: '风景图',
			code: '123',
			specs: '500ml',
			price: '￥100',
			type: '零售商品',
			state: '审核失败',
			istype: '2',
			operate: '等待审核通知'
		},
		{
			id: '3',
			image: 'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
			name: '风景图',
			code: '123',
			specs: '500ml',
			price: '￥100',
			type: '零售商品',
			state: '审核中',
			istype: '3',
			operate: '等待审核通知'
		},
	]
	const fileList = ref<UploadUserFile[]>([
		{
			name: '正面照片',
			url: '',
		},
		{
			name: '背面照片',
			url: '',
		},
		{
			name: '45°面或60°面照片',
			url: '',
		},
		{
			name: '45°面或60°面照片',
			url: '',
		},
		{
			name: '45°面或斜面照片',
			url: '',
		},
		{
			name: '45°反面或斜面照片',
			url: '',
		},
		{
			name: '45°反面或斜反面照片',
			url: '',
		},
		{
			name: '45°反面或斜反面照片',
			url: '',
		},
		{
			name: '45°反面或斜反面照片',
			url: '',
		},
	])

	const goodsList = ref<searchList[]>([
		{
			name: '商品名称',
			index: '1',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '商品编码',
			index: '2',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '商品类型',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '商品规格',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
	])
	const searchList = ref<searchList[]>([
		{
			name: '商品名称',
			index: '1',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '商品编码',
			index: '2',
			placeholder: '请输入关键词搜索',
			type: '2',
			ivalue: ''
		},
		{
			name: '商品类型',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '审核状态',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '是否上架',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		}
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		_response,
		uploadFile
	) => {
		// imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}

	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
		if (rawFile.type !== 'image/jpeg') {
			ElMessage.error('Avatar picture must be JPG format!')
			return false
		} else if (rawFile.size / 1024 / 1024 > 2) {
			ElMessage.error('Avatar picture size can not exceed 2MB!')
			return false
		}
		return true
	}
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log('submit!')
				dialogVisible.value = false
			} else {
				console.log('error submit!', fields)
			}
		})
	}
</script>
<style lang="scss">
	.public-page .avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.public-page .avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.public-page .el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		text-align: center;
	}
</style>
<style lang="scss" scoped>
	.public-page {
		background-color: #fff;
		margin-top: 20px;
		padding: 20px 10px 0px 10px;

		.goods-upload {
			padding: 0 20px;
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;

			.avatar-uploader {
				padding: 0 10px;
				.avatar {
					width: 150px;
					height: 150px;
					display: block;
				}
			}

			.uploader-text {
				width: 162px;
				text-align: center;
				padding: 10px 0;
			}
		}

		.goods-tisp {
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			align-items: center;

			.tisp-left {
				color: #4D4D4D;

				span {
					color: #FF0000;
				}
			}

			.tisp-right {
				color: #0000FF;
			}

			.tisp-right:hover {
				cursor: pointer;
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;

			.goods-item {
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.goods-title {
					font-size: 12px;
					width: 80px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}
		}

		.choice-list {
			display: flex;

			.choice-item {
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 80px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}

			.choice-box {
				width: 29%;
				display: flex;
				justify-content: right;

				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}

		.tag-box {
			display: flex;
		}

		.tables {
			margin-top: 10px;

			.image {
				img {
					width: 50px;
					height: 70px;
				}
			}

			.success {}

			.fail {
				color: #ff0000;
			}

			.afoot {
				color: #00aaff;
			}
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>